<template>
  <div>
    <el-container>
      <el-header style="height: auto;">
        <div style="margin-bottom: 15px">
          <span><img style="width:150px;height:150px; margin:30px 0 10px 0;border-radius: 50%" :src="user.avatarUrl" ></span>
          <span style="float: right;margin: 90px 0 0 -10px"><h1>{{user.username}}</h1>
          <h7 style="color: #737373;margin: -20px 0 10px 0">{{user.motto}}</h7></span>

        </div>
      </el-header>
      <el-divider></el-divider>
      <el-container>
        <el-main>
          <el-card shadow="hover" v-for="(item) in article" style="margin: 50px;width:90%;background-color:rgba(206,210,225,0.52);">
            <el-link style="font-size: 25px" type="primary" @click.native="toArticle(item.id)">{{ item.title }}</el-link>
            <div>{{ item.authorName }}</div>
            <div style="text-align: right">浏览数：{{ item.views }} 点赞数：{{ item.likes }}&nbsp;&nbsp;{{ item.createTime }}</div>
          </el-card>
        </el-main>
        <el-aside width="300px">
          <div style="margin-top: 20px">
            <div style="margin:40px">
              <el-button v-if="!followed" type="primary" @click="addFollow">关注</el-button>
              <el-button v-if="followed" type="info" @click="cancelFollow">取消关注</el-button>
            </div>
            <div><h3>粉丝&nbsp;&nbsp;&nbsp;{{user.followers}}</h3></div>
            <div style="margin:10px"><h3>文章&nbsp;&nbsp;&nbsp;{{user.articleNum}}</h3></div>
            <div v-if="user.city!=null">地区&nbsp;&nbsp;{{user.city}}</div>
          </div>
        </el-aside>

      </el-container>
    </el-container>
  </div>

</template>

<script>
import user from "@/store/user";

export default {
  name: "userPage",
  data() {
    return {
      user: [],
      article:[],
      followed:false,
    }
  },
  created() {
    this.getAllArticle()
    this.getInfo()
  },
  methods: {
    toArticle(id) {
      this.$router.push({path: '/text', query: {passageID: id}})
    },
    getAllArticle: function () {
      var userid=this.$route.query.userID;//这个还没传过来
      this.$axios({
        method: 'post',
        url: '/article/manage',
        data: ({
          userID: userid,
        })
      })
          .then(res => {
            this.article = res.data.data;
            for (let i in this.article) {
              this.article[i].createTime = this.article[i].createTime.replace(/T/g, " ")
              this.article[i].createTime = this.article[i].createTime.replace(/.000\+00:00/g, "")
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    getInfo:function(){
      var userId=this.$route.query.userID;//这个还没传过来
      this.$axios({
        method: 'post',
        url: '/user/current',
        data: ({
          userID:userId,
        })
      })
          .then(res => {
            if (res.data.data) {
              this.user=res.data.data
              if(this.user.avatarUrl===null)
                this.user.avatarUrl="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              this.isFollow(res.data.data.id);
            }
            else{
              this.$message.info("获取个人信息失败")
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    isFollow(id){
      const userInfo = user.getters.getUser(user.state());
      var userID;
      if(userInfo===null)
        userID = null;
      else userID=userInfo.user.userID;
      this.$axios({
        method: 'post',
        url: '/user/isFollow',
        data: ({
          userID:userID,
          authorID:id
        })
      })
          .then(res => {
            if (res.data.data) {
              this.followed=res.data.data
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
    addFollow:function (){
      const userInfo = user.getters.getUser(user.state());
      var userID;
      if(userInfo===null)
        this.$message.warning("请先登录")
      else userID=userInfo.user.userID;
      this.$axios({
        method: 'post',
        url: '/user/follow',
        data: ({
          userID: userID,
          authorID: this.user.id,
          isFollow:true,
        })
      })
          .then(res => {
            if (res.data.data) {
              this.$message.success("关注成功");
              location.reload();
            }
            else{
              this.$message.warning("关注失败");
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })

    },
    cancelFollow:function (){
      const userInfo = user.getters.getUser(user.state());
      var userID;
      if(userInfo===null)
        this.$message.warning("请先登录")
      else userID=userInfo.user.userID;
      this.$axios({
        method: 'post',
        url: '/user/follow',
        data: ({
          userID: userID,
          authorID: this.user.id,
          isFollow:false
        })
      })
          .then(res => {
            if (res.data.data) {
              this.$message.success("取消关注成功");
              location.reload();
            }
            else{
              this.$message.warning("取消关注失败");
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 10px;
  margin:20px 60% 20px 10%;
}

.el-aside {
  background-color: rgba(234, 242, 250, 0.72);
  color: #333;
  text-align: center;
  line-height: 20px;
  margin:20px 50px 0 30px;
  height: 300px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: left;
  line-height: 25px;
  margin:0 30px 0 50px
}
</style>
